<template>
  <div class="table-view-container">
    <slot :width="width" :height="height"></slot>
  </div>
</template>

<script>
export default {
  name: "tableView",
  inheritAttrs: false,
  data() {
    return {
      height: 0,
      width: 0,
    };
  },
  mounted() {
    this.initTableSize();
    window.addEventListener("resize", () => {
      this.initTableSize();
    });
  },
  methods: {
    initTableSize() {
      this.$nextTick((_) => {
        setTimeout(() => {
          let { offsetHeight = 0, offsetWidth } = document.querySelector(
            ".table-view-container"
          ) || { offsetHeight: 0, offsetWidth: 0 };
          this.width = offsetWidth - 20;
          this.height = offsetHeight - 110;
        }, 200);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.table-view-container {
  width: 100%;
  height: 100%;
}
</style>
